<template>
  <div style="height:100%;position: relative;">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxWidth="boxWidth"
      style="width:100%;height:100%;">
    </vue-baberrage>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from 'vue-baberrage';

export default {
  name: 'App',
  data() {
    return {
      barrageIsShow: true, // 是否展示弹幕
      barrageLoop: true, // 是否循环播放
      boxWidth: 400, // 弹幕宽度
      throttleGap: 2000, // 消息间隔
      barrageList: [], // 弹幕列表，格式为数组
      barrageListStore: this.newStore(),
    };
  },
  mounted() {
    this.addToList();
  },
  methods: {
    addToList() {
      // const list = [
      //   {
      //     id: 1,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '湖人总冠军',
      //     time: 1,
      //     barrageStyle: 'yibai',
      //   },
      //   {
      //     id: 2,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第二条弹幕',
      //     time: 2,
      //     barrageStyle: 'erbai',
      //   },
      //   {
      //     id: 3,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第三条弹幕',
      //     time: 3,
      //     barrageStyle: 'sanbai',
      //   },
      //   {
      //     id: 4,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第四条弹幕',
      //     time: 4,
      //     barrageStyle: 'sibai',
      //   },
      //   {
      //     id: 5,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第五条弹幕',
      //     time: 5,
      //     barrageStyle: 'wubai',
      //   },
      //   {
      //     id: 6,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第六条弹幕',
      //     time: 6,
      //     barrageStyle: 'liubai',
      //   },
      //   {
      //     id: 7,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第七条弹幕',
      //     time: 7,
      //     barrageStyle: 'qibai',
      //   },
      //   {
      //     id: 8,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第八条弹幕',
      //     time: 8,
      //     barrageStyle: 'babai',
      //   },
      //   {
      //     id: 9,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第九条弹幕',
      //     time: 9,
      //     barrageStyle: 'jiubai',
      //   },
      //   {
      //     id: 10,
      //     avatar: 'https://www.liurulan.cn/ball.png',
      //     msg: '第十条弹幕',
      //     time: 10,
      //     barrageStyle: 'yiqian',
      //   },
      // ];
      this.spost(this.barrageListStore, "/Mood/getHopeList", {
      }).then((res) => {
        res.d.HopeList.forEach((v) => {
          this.barrageList.push({
            id: v.id, // 弹幕ID
            avatar: v.avatar, // 头像
            msg: v.msg, // 弹幕消息
            time: v.time, // 屏幕展示时间
            type: MESSAGE_TYPE.NORMAL, // 类型
            barrageStyle: v.barrageStyle, // 自定义样式
          });
        });
      });
    },
  },
};
</script>

<style>
.baberrage-item .normal{
  background: rgb(31, 147, 241) !important;
  opacity:0.75
  }

</style>
